<template lang="html">
  <div>
    <div class="add">
       <el-button type="primary" @click="add">新增</el-button>
       <el-button type="primary" @click="addContent">添加选项</el-button>
    </div>
    <tableVue :list="list" :state="true" v-loading="pageData.loading" :total="total" @changeData="selectionVal">
        <slot>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.row,1)">编辑条件
                </el-button>
                <el-button
                  size="mini"
                  @click="handleEdit(scope.row,2)">编辑选项
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  class="del"
                  @click="handleEdit(scope.row,3)">删除</el-button>
              </template>
          </el-table-column>
        </slot>
    </tableVue>
    <dialogVue title="操作" :dialog="dialog" @close="changeData" :state="false">
        <slot>
            <el-form :model="pageData" ref="ruleForm" label-width="120px" class="demo-ruleForm">
              <el-form-item label="条件名称">
                  <el-input v-model="pageData.conditionName" placeholder="请输入内容"></el-input>
               </el-form-item>
               <el-form-item label="模板分类">
                 <el-cascader
                    v-model="pageData.categoryId"
                    placeholder="试试搜索：手机"
                    :options="isClsssList"
                    :props="props"
                    filterable
                  ></el-cascader>
                </el-form-item>
               <el-form-item label="最多选择">
                   <el-input v-model="pageData.multipleMax" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label="是否允许别名">
                  <el-select v-model="pageData.isAlias" placeholder="请选择">
                      <el-option value="">请选择</el-option>
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                 </el-form-item>
                 <el-form-item label="是否支持多选">
                   <el-select v-model="pageData.isMultiple" placeholder="请选择">
                       <el-option value="">请选择</el-option>
                       <el-option
                         v-for="item in Multiple"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
                       </el-option>
                     </el-select>
                  </el-form-item>
                  <el-form-item label="图片" prop="imgUrl">
                        <el-upload
                         class="upload-demo"
                         :auto-upload='false'
                         :on-change="upload"
                         :on-remove="handleRemove"
                         :file-list="pageData.fielList"
                         action="https://jsonplaceholder.typicode.com/posts/"
                         :list-type="String"
                         list-type="picture">
                         <el-button size="small" type="primary">点击上传</el-button>
                       </el-upload>
                  </el-form-item>
                 <el-form-item class="confirm">
                    <el-button type="primary" v-if="btnState == '1'" @click="submitForm(null,'post')">提交</el-button>
                    <el-button type="primary" v-if="btnState == '2'" @click="upForm('')">更新</el-button>
                 </el-form-item>
            </el-form>
        </slot>
    </dialogVue>
      <dialogVue title="操作" :dialog="pcot" @close="changeData" :state="false">
          <slot>
              <el-form :model="pcotData" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                    <el-form-item label="选项名称">
                      <el-input v-model="pcotData.optionName" placeholder="请输入内容"></el-input>
                   </el-form-item>
                   <el-form-item label="是否允许别名">
                     <el-select v-model="pcotData.isAlias" placeholder="请选择">
                         <el-option value="">请选择</el-option>
                         <el-option
                           v-for="item in options"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                         </el-option>
                       </el-select>
                    </el-form-item>
                    <el-form-item class="confirm">
                       <el-button type="primary" v-if="btnState == '1'" @click="addForm(null,'post')">提交</el-button>
                    </el-form-item>
              </el-form>
          </slot>
      </dialogVue>
  </div>
</template>

<script>
  import Data from './productEstData.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import checkPermission from "@/utils/permission"; // 权限判断函数
  import { Base64 } from 'js-base64';
  import {
    productConditionList,
    AddproductCondition,
    Addpcot,
    getPcot,
    getAllPcot,
    delCondition,
    compileProductCondition,
    allProudctClass
  } from "@/api/product/product";
  export default {
    components : {
      tableVue,
      dialogVue
    },
    data () {
      return JSON.parse(JSON.stringify(Data))
    },
    mounted () {
        this.getproductConditionList();
        this.getAllProudctClass();

    },
    methods : {
      getAllProudctClass () {
        allProudctClass().then(res=>{
          if (res.data.code == 'OK') {
            this.isClsssList = res.data.data.map(item=>{
              if (item.childrens.length == 0) {
                  delete item.childrens
              }
                return item
            });
          }
        })
      },
      upload (file,fileList) {//拿到图片的地址
           let reader = new FileReader();
           reader.readAsDataURL(file.raw);
           reader.onload =  () => {
            this.pagefileUrl.push({
              base64Url:reader.result.split(',')[1],
              url:file.url
            });
             // this.pageData.pageImgUrl.push(reader.result.split(',')[1])
           }
      },
      getproductConditionList() {
        productConditionList().then(res=>{
            this.pageData.loading = true;
          if (res.data.code == 'OK') {
            this.total = res.data.data.total;
            this.list.tbody = res.data.data.records.map(item=>{
               item.gmtCreate = this.switchTime(item.gmtCreate)
               item.gmtUpdate = this.switchTime(item.gmtUpdate)
               item.isAlias = item.isAlias == 'Y' ? '是' : '否'
               return item;
            });
            this.pageData.loading = false;
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      submitForm (conditionTplId,method) {
          let data = {
            conditionName : this.pageData.conditionName,
            isMultiple : this.pageData.isMultiple,
            isAlias : this.pageData.isAlias,
            conditionTplId : this.pageData.conditionTplId == undefined ? null : this.pageData.conditionTplId,
            imgs : this.pagefileUrl.map((item)=>{return item.base64Url}),
            categoryId : this.pageData.categoryId[this.pageData.categoryId.length - 1]
          }
          AddproductCondition(data,method).then(res=>{
            if (res.data.code == 'OK') {
                if (method == 'post') {
                    this.$message.success('新增成功');
                } else {
                    this.$message.success('编辑成功');
                }
                  this.dialog = false;
                  this.getproductConditionList();
            } else {
              this.$message.error(res.data.message);
            }
          })
      },
      handleRemove(file, fileList) {
        this.pageData.fielList.map((item,idx,arr)=> {
            if (file.url == item.url) {
                arr.splice(idx,1);
            }
        });
        this.pagefileUrl.map((item,idx,arr)=> {
            if (file.url == item.url) {
                arr.splice(idx,1)
            }
        });
     },
      upForm () {
        // this.submitForm(this.pageData.cpidtTplId,'put');
        var url = this.pageData.fielList.map((item)=>{return item.url})
        let data = {
          conditionName : this.pageData.conditionName,
          isMultiple : this.pageData.isMultiple,
          isAlias : this.pageData.isAlias,
          exampleImgs : this.data,
          conditionTplId : this.pageData.conditionTplid,
          imgs : this.pagefileUrl.map((item)=>{return item.base64Url}),
          exampleImgs : JSON.stringify(url),
            categoryId : this.pageData.categoryId[this.pageData.categoryId.length - 1]
        }
        compileProductCondition(data).then(res=>{
          if (res.data.code == 'OK') {
              this.getproductConditionList();
              this.$message.success('编辑成功');
              this.dialog = false;
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      add () {
        this.pageData.fielList = []
        this.pageData = {}
        this.dialog = true
        this.btnState = '1'
      },
      handleEdit (item,num) {
        this.pageData.fielList = []
        if (num ==  2) {
          this.$router.push({
            name : 'option',
            query : {
              item : JSON.stringify(item.conditionTplId)
            }
          })
        } else if (num == 1) {
          this.btnState = '2'
          JSON.parse(item.exampleImgs).map(item=>{
              this.pageData.fielList.push({
                name : '',
                url : item
              })
            })
          this.dialog = true;
          this.pageData.conditionName = item.conditionName;
          this.pageData.isAlias = item.isAlias;
          this.pageData.isMultiple = item.isMultiple;
          this.pageData.conditionTplid = item.conditionTplId
          this.pageData.categoryId.push(item.categoryId)
        } else {
          this.delMessage(()=>{
            delCondition(item.conditionTplId).then(res=>{
              if (res.data.code == 'OK') {
                  this.$message.success('删除成功');
                  this.getproductConditionList();
              } else {
                this.$message.error(res.data.message);
              }
            })
          })
        }
      },
      changeData (val) {
        this.dialog = val;
        this.pcot = val;
      },
      selectionVal (data) {
        this.conditionTplId = data;
      },
      addContent () {
        if (this.conditionTplId < 1) {
            this.$message.error('请选择添加题目');
        } else if (this.conditionTplId > 1) {
            this.$message.error('只能选择一个');
        } else {
            this.btnState = '1'
            this.pcot = true;
        }
      },
      addForm (ids,method) {
        var id = ''
        this.conditionTplId.map(item=>{
           id = item.conditionTplId
        })
        let data = {
          optionName : this.pcotData.optionName,
          isAlias : this.pcotData.isAlias,
          conditionTplId : id
        }
        Addpcot (data,method).then(res=>{
          if (res.data.code == 'OK') {
            this.pcot = false;
            this.$message.success('新增成功');
          }
        })
      },
    }
  }
</script>

<style scoped>
.search {
  width: 100%;
  background-color: #fff;
  padding:20px;
  box-sizing: border-box;
  margin-top: 10px;
}
.input {
  /* width: 300px; */
  display: flex;
  flex-wrap: wrap;
}
.input p {
  margin-top: 10px;
}
label {
  line-height: 40px;
  color: #333;
  margin: 0 10px;
}
.el-input {
  width:200px;
  height:20px;
}
.add {
  margin-top: 10px;
  padding-left: 14px;
}
.se {
  margin-left: 20px;
}
.confirm {
  position: absolute;
  bottom: -1px;
  right: 100px;
}
</style>
